<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.outer{
				height: 500px;
				border-bottom: 10px solid black;
				overflow: hidden;/*开启Bfc，解决外边距重叠的问题*/
				margin: 50px auto;
				
			}
			.outer div{
				float:left ;
				height: 100px;
				width: 100px;
				border-radius: 50%;
				
				animation: ball .6s forwards alternate infinite;
			}
			/*.box1{
				height: 100px;
				width: 100px;
				border-radius: 50%;
				background-color: #bfa;
				animation: ball 1s forwards ease-in;
				
			}
			*/
			div .box1{
				background-color: #BBFFAA;
			}
			div .box2{
				background-color: pink;
				animation-delay: 0.1s;
			}
			div .box3{
				background-color: yellow;
				animation-delay: 0.2s;
			}
			div .box4{
				background-color: purple;
				animation-delay: 0.3s;
			}
			div .box5{
				background-color: skyblue;
				animation-delay: 0.4s;
			}
			div .box6{
				background-color: orange;
				animation-delay: 0.5s;
			}
			div .box7{
				background-color: yellowgreen;
				animation-delay: 0.6s;
			}
			div .box8{
				background-color: tomato;
				animation-delay: 0.7s;
			}
			div .box9{
				background-color: orange;
				animation-delay: 0.8s;
			}
			div .box10{
				background-color: mediumaquamarine;
				animation-delay: 0.9s;
			}
			
			@keyframes ball{
				from{margin-top: 0;}
				to{margin-top: 400px;}
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
			<div class="box4"></div>
			<div class="box5"></div>
			<div class="box6"></div>
			<div class="box7"></div>
			<div class="box8"></div>
			<div class="box9"></div>
			<div class="box10"></div>
		</div>
	</body>
</html> 
